<!-- This is an example component -->
<div class="flex flex-col justify-center h-full" x-data="{
modalOpen: false,
imgs:['/avatar.jpg','/avatar1.jpg','/avatar2.jpg'],
currentIndex:0,
login:function(){
    this.modalOpen = true
},
saveAvatar(){
   $wire.updateAvatar(this.imgs[this.currentIndex])
}

 }">
    <div class="bg-gray-600 overflow-hidden container mx-auto shadow-lg rounded-lg">
        <!-- headaer -->
        <div class="px-5 py-5 flex justify-between items-center bg-white border-b-2">
            <div class="font-semibold text-2xl">小木屋</div>

            @if($profile['avatar'])
                <img src="{{$profile['avatar']}}"  x-on:click="modalOpen = true" class="h-14 w-14 p-2 rounded-full text-white font-semibold flex items-center justify-center hover:scale-110 transition-all cursor-pointer">
            @else
                <div
                    class="h-12 w-12 p-2 bg-yellow-500 rounded-full text-white font-semibold flex items-center justify-center hover:scale-110 transition-all cursor-pointer"

                    x-on:click="modalOpen = true"

                >
                    头像
                </div>
            @endif

        </div>
        <!-- end header -->
        <!-- Chatting -->
        <div class="flex flex-row justify-between bg-white"
        >
            <!-- chat list -->
            <div class="flex flex-col w-2/5 border-r-2 overflow-y-auto" >

                <!-- end search compt -->
                <!-- user list -->
                @foreach( $this->userList as $key => $member)
                <div
                    class="flex flex-row py-4 px-2 justify-center items-center border-b-2"
                >
                    <div class="w-1/4">
                        <img
                            src="{{$member['avatar']}}"
                            class="object-cover h-12 w-12 rounded-full"
                            alt=""
                        />
                    </div>
                    <div class="w-full">
                        <div class="text-lg font-semibold">{{$member['name']}}</div>

                    </div>
                </div>
                @endforeach
                <!-- end user list -->
            </div>
            <!-- end chat list -->
            <!-- message -->
            <div class="w-full px-5 flex flex-col justify-between"
                 x-data="{
                        scrollToBottom:()=>{
                            $refs.chat.scrollTop = $refs.chat.scrollHeight
                        }
                    }"
                 x-init="scrollToBottom"
                 x-on:load-message.window="scrollToBottom"
            >
                <div class="flex flex-col mt-5  overflow-y-scroll h-[400px]" x-ref="chat"  x-on:refresh="scrollToBottom">

                    @foreach($messageList as $key=> $message)
                        <div class="flex justify-start mb-4" wire:key="{{ $key }}">

                            <img
                                src="{{$message['avatar']}}"
                                class="object-cover h-8 w-8 rounded-full"
                                alt=""
                            />
                            <div class="ml-2 gap-2">
                                <p class="text-gray-500 text-base">{{ $message['name'] }}</p>
                                <div
                                    class="py-2 px-4 bg-gray-400 rounded-br-3xl rounded-tr-3xl rounded-bl-xl text-white"
                                >
                                    {{$message['message']}}
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
                <div class="py-5 flex gap-2">
                    <input
                        x-ref="input"
                        x-on:keydown.enter="$wire.submitData($event.target.value)"
                        class="flex-1 bg-gray-300 py-2 px-3 rounded-xl focus:outline-none focus-visible:border-sky-500"
                        type="text"
                        placeholder="说点狗屁东西吧..."
                    />
                    <svg role="img" xmlns="http://www.w3.org/2000/svg" width="42px" height="42px" viewBox="0 0 24 24" aria-labelledby="happyFaceIconTitle" stroke="#6666" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#6666"> <title id="happyFaceIconTitle">Happy Face</title> <path d="M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328"/> <line stroke-linecap="round" x1="9" y1="9" x2="9" y2="9"/> <line stroke-linecap="round" x1="15" y1="9" x2="15" y2="9"/> <circle cx="12" cy="12" r="10"/> </svg>

                    <svg  @click="$wire.submitData($refs.input.value)" class="cursor-pointer" wire:loading.class="animate-spin" wire:target="submitData" xmlns="http://www.w3.org/2000/svg" fill="none" width="42px" height="42px" viewBox="0 0 24 24" stroke="#6666" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="miter" color="#6666">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
                    </svg>

                </div>
            </div>
            <!-- end message -->
            <div class="w-2/5 border-l-2 px-5">
                <div class="flex flex-col">

                </div>
            </div>
        </div>
    </div>

    <div  x-ref="modalT"
         :class="{ 'z-40': modalOpen }" class="relative w-auto h-auto">
        @teleport('body')
        <div x-show="modalOpen" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen" x-cloak>
            <div x-show="modalOpen"
                 x-transition:enter="ease-out duration-300"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="ease-in duration-300"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 @click="modalOpen=false" class="absolute inset-0 w-full h-full bg-white backdrop-blur-sm bg-opacity-70"></div>
            <div x-show="modalOpen"
                 x-trap.inert.noscroll="modalOpen"
                 x-transition:enter="ease-out duration-300"
                 x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave="ease-in duration-200"
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
                 class="relative w-full py-6 bg-white border shadow-lg px-7 border-neutral-200 sm:max-w-lg sm:rounded-lg">
                <div class="flex items-center justify-between pb-3">
                    <h3 class="text-lg font-semibold">选择你的头像</h3>
                </div>
                <div class="relative w-auto pb-8 flex justify-between">
                    <template x-for="(img,index) in imgs">
                       <div class="rounded-full w-[150px] h-[150px] overflow-hidden cursor-pointer hover:shadow-2xl" @click="currentIndex = index" :class="{'border-amber-400': index == currentIndex, 'border-4': index == currentIndex}" :key="index">
                           <img class="object-cover" :src="img">
                       </div>
                    </template>
                </div>
                <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
                    <button @click="saveAvatar" type="button" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-colors border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2 bg-neutral-950 hover:bg-neutral-900">保 存</button>
                </div>
            </div>
        </div>
        @endteleport
    </div>
</div>


@script
<script>

    // 初始化连接
    Echo.channel('channel-name').listen('Sing', (e) => {
        console.log(e)
    })
</script>

@endscript
